<template>
        <div class="all" >
            <h4>发表评论</h4>
        <textarea placeholder="请输入" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click='setcommom'>评论</mt-button>
        <div class="infobox" v-for="(item,i) in commom" :key='i'>
           <p>
               用户名：{{item.user_name}}
           </p>
           <p>
              {{item.content}}
           </p>
           <p class="botbox">
               <span>1楼</span>
               <span>{{item.add_time|dateFormat()}}</span>
           </p>
        </div>
        <mt-button type="default" size="large" @click='add'>更多评论</mt-button>
    </div>


</template>
<script>
export default {
    data() {
        return {
            index:1,
            commom:[],
            msg:''
        }
    },
    created() {
        this.getlist()
    },
    methods: {
        getlist(){
            this.$http.get(`api/getcomments/${this.uid}?pageindex=${this.index}`).then(list=>{     
                if(list.body.status==0){
                 this.commom=this.commom.concat(list.body.message)
               }
                

            })
        },
        add(){
            this.intex++;
            this.getlist()
        },
        setcommom(){
          if(this.msg.trim().length==0){
                   return
               };



            this.$http.post('api/postcomment/'+this.uid,{content:this.msg.trim()}).then(roulit=>{
              
               var list={
                   user_name:'匿名用户',
                   content:this.msg,
                   add_time: Date.now()

               }
               if(roulit.body.status==0){
                    this.commom.unshift(list)
                    this.msg=''
               }
            })
        }
        
    },
    props:["uid"]
}
</script>
<style lang="scss" scoped>
.all{
    h4{
        color:red
    }
    .infobox{
        border: 1px solid gray;
        background: lightgoldenrodyellow;
       margin-top:5px ;
        margin-bottom:5px ;
        padding: 3px;
        box-sizing: border-box;
    }
    .botbox{
        margin-top: 5px;
        display: flex;
        justify-content:flex-end;
    }
}
</style>
